;(function($){
	$.fn.number_letters_keyboard = function(opts){
		var el = this;
		var opt = {
			dataBack : function(){},
			closeBack : function(){},
		}
		var param = $.extend(opt,opts);
		var app = new App(el,param);
	}
	
	var App = function(el,param){
		this.el = el;
		this.param = param;
		this.initHtml();
		this.bindEvent();
	}
	
	App.prototype = {
		bindEvent : function(){
			var el = this.el;
			var param = this.param;
			var t = this;
			
			//数字按钮 
			el.find(".number-item,.letters-item").unbind("click").click(function(){
				var value = $(this).data("value");
				param.dataBack(value);
			})
			
			//数字，字母切换
			el.find(".number-letters-item").unbind("click").click(function(){
				el.find(".number-letters-item,.number-box,.letters-box").toggle();
			})
		},
		initHtml : function(){
			var el = this.el;
			var param = this.param;
			var t = this;
			var html = 	'<style>'+
							'.number-box,.letters-box,.number-letters-box{'+
								'display : flex;'+
								'flex-wrap : wrap;'+
							'}'+
							'.number-box .number-item{'+
								'width: 33.33%;'+
							    'height: 60px;'+
							    'font-size: 26px;'+
							    'font-weight: bold;'+
							'}'+
							'.letters-box .letters-item{'+
								'width: 25%;'+
							    'height: 40px;'+
							    'font-size: 26px;'+
							    'font-weight: bold;'+
							'}'+
							'.number-letters-box .number-letters-item{'+
								'width: 100%;'+
							    'height: 60px;'+
							    'font-size: 26px;'+
							    'font-weight: bold;'+
							'}'+
						'</style>'+
						'<div class="number-box">'+
							'<button type="button" class="number-item" data-value="1">1</button>'+
							'<button type="button" class="number-item" data-value="2">2</button>'+
							'<button type="button" class="number-item" data-value="3">3</button>'+
							'<button type="button" class="number-item" data-value="4">4</button>'+
							'<button type="button" class="number-item" data-value="5">5</button>'+
							'<button type="button" class="number-item" data-value="6">6</button>'+
							'<button type="button" class="number-item" data-value="7">7</button>'+
							'<button type="button" class="number-item" data-value="8">8</button>'+
							'<button type="button" class="number-item" data-value="9">9</button>'+
							'<button type="button" class="number-item" data-value="W">W</button>'+
							'<button type="button" class="number-item" data-value="0">0</button>'+
							'<button type="button" class="number-item" data-value="M">M</button>'+
						'</div>'+
						'<div class="letters-box" style="display:none;">'+
							'<button type="button" class="letters-item" data-value="A">A</button>'+
							'<button type="button" class="letters-item" data-value="B">B</button>'+
							'<button type="button" class="letters-item" data-value="C">C</button>'+
							'<button type="button" class="letters-item" data-value="D">D</button>'+
							'<button type="button" class="letters-item" data-value="E">E</button>'+
							'<button type="button" class="letters-item" data-value="F">F</button>'+
							'<button type="button" class="letters-item" data-value="G">G</button>'+
							'<button type="button" class="letters-item" data-value="H">H</button>'+
							'<button type="button" class="letters-item" data-value="I">I</button>'+
							'<button type="button" class="letters-item" data-value="J">J</button>'+
							'<button type="button" class="letters-item" data-value="K">K</button>'+
							'<button type="button" class="letters-item" data-value="L">L</button>'+
							'<button type="button" class="letters-item" data-value="N">N</button>'+
							'<button type="button" class="letters-item" data-value="O">O</button>'+
							'<button type="button" class="letters-item" data-value="P">P</button>'+
							'<button type="button" class="letters-item" data-value="Q">Q</button>'+
							'<button type="button" class="letters-item" data-value="R">R</button>'+
							'<button type="button" class="letters-item" data-value="S">S</button>'+
							'<button type="button" class="letters-item" data-value="T">T</button>'+
							'<button type="button" class="letters-item" data-value="U">U</button>'+
							'<button type="button" class="letters-item" data-value="V">V</button>'+
							'<button type="button" class="letters-item" data-value="X">X</button>'+
							'<button type="button" class="letters-item" data-value="Y">Y</button>'+
							'<button type="button" class="letters-item" data-value="Z">Z</button>'+
						'</div>'+
						'<div class="number-letters-box">'+
							'<button type="button" class="number-letters-item">'+$.i18n.propJsp("字母")+'</button>'+
							'<button type="button" class="number-letters-item" style="display:none;">'+$.i18n.propJsp("数字")+'</button>'+
						'</div>';
			el.html(html);
		}, 
	}

})(jQuery);